<!DOCTYPE html>
<html>

<head>
    <title>Form Upload index</title>
</head>

<body>
    <form id="uploadForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>

        <label for="file">File:</label>
        <input type="file" id="file" name="file"><br><br>

        <button type="button" onclick="uploadFormData()">Submit</button>
    </form>

    <div id="result"></div>
    <script>
        /*原生JS版*/
        // document.getElementById("upJS").onclick = function () {
        //     /* FormData 是表单数据类 */
        //     var fd = new FormData();
        //     var ajax = new XMLHttpRequest();
        //     /* 把文件添加到表单里 */
        //     fd.append("upfile", document.getElementById("upfile").files[0]);
        //     ajax.open("post", "/test", true);

        //     ajax.onload = function () {
        //         console.log(ajax.responseText);
        //     };

        //     ajax.onreadystatechange = function () {
        //         if (ajax.readyState === 4 && ajax.status === 200) {
        //             document.getElementById('result').innerText = ajax.responseText;
        //         }
        //     };

        //     ajax.send(fd);
        // }
        
        function uploadFormData() {
            // 获取表单元素
            const form = document.getElementById('uploadForm');

            // 创建 FormData 对象
            const formData = new FormData(form);

            // 创建 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();

            // 设置请求类型和 URL
            xhr.open('POST', '/test', true);

            // 设置请求完成后的回调函数
            xhr.onload = function () {
                if (xhr.status === 200) {
                    // 请求成功，显示服务器返回的结果
                    document.getElementById('result').innerHTML = xhr.responseText;
                } else {
                    // 请求失败，显示错误信息
                    document.getElementById('result').innerHTML = 'Error: ' + xhr.status;
                }
            };

            // 发送请求
            xhr.send(formData);
        }
    </script>
</body>
</html>